<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04.W3school导航条</title>
    <link rel="stylesheet" href="./resource/reset.css">
    <style>
        .lead{
            width: 1210px;
            height: 48px;
            margin: auto;
        }
        .text{
            width: 159px;
            height: 48px;
            color: rgb(112, 111, 111);
            text-decoration: none;
            line-height: 48px;
            background-color: rgb(232,231,227);
            /* margin: auto; */
            text-align: center;
            
            /* padding-left: 36px; */
            /* padding-right: 36px; */
            float: left;
        }
        .text:hover{
            background-color: rgb(63,63,63);
            color: azure;
        }
        .text2{
            width: 191px;
        }
        .text3{
            width: 175px;
        }
        .text4{
            width: 177px;
        }
        .text6{
            width: 178px;
        }
    </style>

</head>
<body>
    <div class="lead" >
        <a class="text" href="http://www.baidu.com">HTML/CSS</a>
        <a class="text text2" href="http://www.baidu.com">Browser Side</a>
        <a  class="text text3"href="http://www.baidu.com">Server Side</a>
        <a class="text text4" href="http://www.baidu.com">Programming</a>
        <a class="text" href="http://www.baidu.com">XML</a>
        <a  class="text text6"href="http://www.baidu.com">Web Building</a>
        <a  class="text"href="http://www.baidu.com">Reference</a>
        
    </div>
</body>
</html>